<template>
  <div>
<h1>显示房型列表</h1>
名称:
<input type="text" v-model="query.name">
<input type="button" value="查询" @click="getList">
<table class="table table-bordered">
  <tbody>
    <tr>
      <td>名称</td>
      <td>图片</td>
      <td>面积</td>
      <td>价格</td>
      <td>入住人数</td>
      <td>状态</td>
      <td>操作</td>
    </tr>
  <tr v-for="item in list">
  <td>{{item.name}}</td>
  <td><img :src="item.img" alt="" width="60" height="60"></td>
  <td>{{item.size}}</td>
  <td><span>￥</span><span style="color:red">{{item.price}}</span></td>
  <td>{{item.num}}</td>
  <td>
    <span style="color: red;" v-if="item.state==1">启用</span> 
    <span style="color: green" v-else>禁用</span>
  </td>
  <td>
    <input type="button" value="删除" @click="del(item.id)">
    <input type="button" value="修改" @click="upd(item.id)">
  </td>
</tr>
  </tbody>
</table>
<div>
  <span>共{{   totalCount}}页</span>
<span>共{{ totalPage }}行</span>
<span>共{{ query.pageIndex }}/{{ totalCount }}</span>
  <input type="button" value="首页" @click="gopage('a')">
  <input type="button" value="上一页" @click="gopages('a')">
  <input type="button" value="下一页" @click="gopages('b')">
  <input type="button" value="尾页" @click="gopage('b')">
</div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import{reactive,toRefs,onMounted} from 'vue'
import {ref} from 'vue'
import { useRouter,useRoute } from 'vue-router'

const router = useRouter()
const route= useRoute()

let data:any=reactive({
  query:{
    name:'',
    pageIndex:1,
    pageSize:2
  },
  list:[],
  totalPage:0,
  totalCount:0
})
let { query,list,totalPage,totalCount}=toRefs(data)


onMounted(() => {
  getList()
})

//删除

const del=(id:any)=>{
  let f=confirm('确定删除吗？')
  if(f==true){
    axios({
      url:'https://localhost:7017/api/RoomType/Delete',
      method:'delete',
      params:{id:id}
    })
    .then((res)=>{
      console.log(res);
      if(res.data>0){
       alert('删除成功');
       getList();
      }
      else{
        alert('删除失败');
      }
    })
    .catch((err)=>{
      console.log(err);
    })
  }
}


//修改
const upd=(id:any)=>{
  router.push({
    path:'/Update',
    query:{id:id}
  })
}



//分页
const gopage=(val:string)=>{
  if(val=='a'){
   if(query.value.pageIndex==1){
   alert('已经第一页了');
   return;
   }
   query.value.pageIndex=1;
  }
  if(val=='b'){
    if(query.value.pageIndex==totalPage.value){
      alert('已经最后一页了');
      return;
    }
    query.value.pageIndex=totalPage.value
  }
getList();
}


const gopages=(val:string)=>{
  if(val=='a'){
   if(query.value.pageIndex==1){
  alert('已经第一页了');
  return;
   }
   query.value.pageIndex-=1;  
  }
  if(val=='b'){
   if(query.value.pageIndex==totalPage.value){
  alert('已经最后一页了');
  return;
   }
   query.value.pageIndex+=1;
  }
  getList();
}


//显示
const getList=()=>{
  let obj={
    name:query.value.name,
    pageIndex:query.value.pageIndex,
    pageSize:query.value.pageSize
  }
  axios({
    url:'https://localhost:7017/api/RoomType/GetList',
    method:'get',
    params:obj
  })
  .then((res)=>{
    console.log(res)
    list.value=res.data.data
    totalPage.value=res.data.totalPage
    totalCount.value=res.data.totalCount
  })
  .catch((err)=>{
    console.log(err)
  })
}

</script>

<style scoped>

</style>